<template>
  <div id="adminList">
    <div id="search">
      <el-input
        placeholder="搜索管理员编号"
        size="small"
        v-model="searchId">
      </el-input>
    </div><!--搜索管理员编号框-->
    <div id="add">
      <el-button type="primary" @click="addAdmin" size="small">添加管理员</el-button><!--添加管理员按钮-->
    </div>
    <div id="adminTable">
      <el-table
        :data="filterInfo"
        style="margin-top: 20px">
        <el-table-column
          label="编号"
          prop="id">
        </el-table-column>
        <el-table-column
          label="名称"
          prop="name">
        </el-table-column>
        <el-table-column
          label="邮箱"
          prop="aEmail">
        </el-table-column>
        <el-table-column
          label="权限"
          prop="role">
          <template slot-scope="props">
            <span v-if="props.row.role === parseInt('2')">管理员</span>
          </template>
        </el-table-column>
        <el-table-column
          label="重置密码"
          prop="id">
          <template slot-scope="props">
            <el-button @click="resetPwd(props.row.id)" type="text" size="small">重置密码</el-button>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          prop="id">
          <template slot-scope="props">
            <el-button type="primary" icon="el-icon-edit" @click="editAdmin(props.row)" size="small"></el-button>
            <el-button type="primary" icon="el-icon-delete" @click="deleteAdmin(props.row.id)" size="small"></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div><!--管理信息表格-->
    <el-dialog title="管理员信息" :visible.sync="displayShow1" class="dialog">
      <el-form :model="addInfo" :rules="rules" ref="addInfo" label-width="100px" class="dialog_form">
        <el-form-item label="管理员名称" prop="name" class="formName">
          <el-input v-model="addInfo.name" class="form"></el-input>
        </el-form-item>
        <el-form-item label="管理员邮箱" prop="email" class="formName">
          <el-input v-model="addInfo.email" class="form"></el-input>
        </el-form-item>
        <el-form-item label="管理员密码" prop="password" id ="password" class="formName">
          <el-input type="password" v-model="addInfo.password" class="form"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="sureButton('addInfo')" style="margin-left: 8%;margin-top: 30px">确定</el-button>
          <el-button @click="closedButton">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog><!--新增弹框-->
    <el-dialog title="管理员信息" :visible.sync="displayShow2" class="dialog">
      <el-form :model="editInfo" :rules="rulesEdit" ref="editInfo" label-width="100px" class="dialog_form">
        <el-form-item label="管理员名称" prop="name" class="formName">
          <el-input v-model="editInfo.name" class="form"></el-input>
        </el-form-item>
        <el-form-item label="管理员邮箱" prop="email" class="formName">
          <el-input v-model="editInfo.email" class="form"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="sureButton('editInfo')" style="margin-left: 8%;margin-top: 30px">确定</el-button>
          <el-button @click="closedButton">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog><!--修改弹框-->
    <Pages @returnPage="getPage" @getInfo="getAllAdmin" class="page" :total="total" :pageSize="pageSize" ></Pages>
  </div>
</template>


<script>
  import { getAdminList, // 获取管理员列表
           addAdmin, // 新增管理员
           editAdminInfo, // 保存修改管理员信息
           deleteAdminInfo, // 删除管理员
           resetPassword // 重置管理员密码
          } from "../../../api/adminList"
  import Pages from "../../../components/pages/Pages"
  export default {
    name:"list",
    components:{
      Pages
    },
    data() {
      return {
        currentPageNow: 1, // 默认显示第一页
        pageSize: 5, // 每页显示五条
        total: 150, // 总数
        searchId: '', // 搜索Id
        displayShow1: false, // 添加表单是否显示
        displayShow2: false, // 修改表单是否显示
        operationType: 1, // 由于新增和修改用的是同一个弹框，所以设置1，2来判断当前需要执行新增还是修改。1新增 2 修改
        adminList: [], // 管理员列表
        addInfo: { // 新增信息
          id:'',
          name:'',
          email:'',
          password:''
        },
          editInfo: { // 修改信息
              id:'',
              name:'',
              email:''
          },
        rules: { // 新增/修改规则
          name: [
            { required: true, message: '请输入管理员名称', trigger: 'blur' },
            { min: 3, message: '至少3位字符', trigger: 'blur' }
          ],
          email: [
            { required: true, message: '请输入邮箱', trigger: 'blur' },
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 3, message: '至少5位字符', trigger: 'blur' }
          ],
        },
          rulesEdit: { // /修改规则
              name: [
                  { required: true, message: '请输入管理员名称', trigger: 'blur' },
                  { min: 3, message: '至少3位字符', trigger: 'blur' }
              ],
              email: [
                  { required: true, message: '请输入邮箱', trigger: 'blur' },
              ]
          }
      };
    },
    computed: {
      filterInfo () { // 根据输入的ID过滤信息
        const {searchId, adminList} = this
        let fInfo
        if (searchId !== '') {
          fInfo = adminList.filter(p => p.id === parseInt(searchId))
        } else {
          fInfo = this.adminList
        }
        return fInfo
      }
    },
    mounted(){
      this.getAllAdmin()
    },
    methods: {
        getPage(val){
          this.currentPageNow = val;
          console.log(this.currentPageNow)
        },
      handleCurrentChange(val) { // 显示第几页
        this.currentPage=val // 改变默认的页数
        // 切换页码时，要获取每页显示的条数
        this.getAllAdmin(val) // 获取当前页数列表
      },
      getAllAdmin (val){ // 从后端获取所有管理员列表
        if(!val) val = 1
        let requestData = {
          pageNum: parseInt(val)
        }
        getAdminList(requestData).then(res=>{
          //console.log(res)
          this.adminList = res.data.data.datas
          this.total = res.data.data.totalNum
        }).catch(err=>{
          console.log('err')
        })
      },
      resetPwd (id) { // 重置密码
        let requestData = {
          adminId:id
        }
        this.$confirm('此操作将重置该管理员密码, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          resetPassword(requestData).then(res=>{
            this.getAllAdmin(1)
          }).catch(err=>{
            console.log(err)
          })
          this.$message({
            type: 'success',
            message: '重置成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '重置失败'
          });
        });
      },
      deleteAdmin (id) { // 删除管理员
        let requestData = {
          ids:id
        }
        this.$confirm('此操作将删除该管理员, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteAdminInfo(requestData).then(res=>{
            this.getAllAdmin(this.currentPageNow);
          }).catch(err=>{
            console.log(err)
          })
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '删除失败'
          });
        });
      },
      editAdmin (admin) { // 编辑管理员信息
        this.operationType = 2 // 设置operationType为2
        this.displayShow2 = true // 显示弹出层
        this.editInfo.id = admin.id // 获取修改的用户ID

        this.editInfo.name = admin.name
        this.editInfo.email = admin.aEmail
      },
      addAdmin () { // 添加管理员
        this.displayShow1 = true // 显示表单
        this.operationType = 1 // 将operationType转换为1，就是将确定按钮执行新增操作。

        // 将弹出层中的数据设置为空
        this.addInfo.name = ''
        this.addInfo.email = ''
        this.addInfo.password = ''
      },
      closedButton () { // 关闭弹出框
        this.displayShow1 = false
        this.displayShow2 = false
      },
      sureButton (formName) { // 添加/修改的确定按钮
          if (this.operationType === 1){
              this.$refs[formName].validate((valid) => {
                  if(valid){
                      let requestData = {
                          name:this.addInfo.name,
                          password:this.addInfo.password,
                          email:this.addInfo.email
                      }
                      addAdmin(requestData).then(res=>{
                          this.displayShow1 = false
                          this.getAllAdmin(this.currentPageNow);

                          this.$message({
                              type: 'success',
                              message: res.data.message
                          });
                      }).catch(err=>{
                          console.log(err)
                          this.$message({
                              type: 'info',
                              message: '新增失败!'
                          });
                      })
                  }
              })
          }else if(this.operationType === 2){
              this.$refs[formName].validate((valid) => {
                  if(valid){
                      let requestData = {
                          id:this.editInfo.id,
                          name:this.editInfo.name,
                          aEmail:this.editInfo.email
                      }
                      editAdminInfo(requestData).then(res=>{
                          this.displayShow2 = false
                          this.getAllAdmin(this.currentPageNow);
                          this.$message({
                              type: 'success',
                              message: res.data.message
                          });
                      }).catch(err=>{
                          console.log(err)
                          this.$message({
                              type: 'info',
                              message: '修改失败!'
                          });
                      })
                  }
              })
          }else {
              console.log('error submit!!');
              return false;
          }
      }
    },
  }
</script>

<style lang="scss" scoped>
  #adminList{
    #search {
      float: left;
      width: 49%;
    }
    #add {
      float: left;
      width: 10%;
      margin-left: 10px;
    }
    .demo-table-expand {
      font-size: 0;
    }
    .demo-table-expand label {
      width: 90px;
      color: #99a9bf;
    }
    .demo-table-expand .el-form-item {
      margin-right: 0;
      margin-bottom: 0;
      width: 50%;
    }
    .form {
      margin-right: 20px;
      width: 80%;
    }
    .formName {
      margin-top: 30px;
    }
    .demo-ruleForm {
      padding-top: 40px;
      border-radius: 30px;
      background-color: #ffffff;
      box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
      height: 400px;
      width: 360px;
      position: absolute;
      top: 50%;
      left: 50%;
      margin: -200px 0 0 -180px;
    }
    #adminTable {
      padding-top: 20px;
    }
    .page {
      margin-top: 10px;
      text-align:center
    }
  }

</style>
